﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <link href="~/Content/styles/main.css" rel="stylesheet" />
    <link href="~/Content/styles/buyCar.css" rel="stylesheet" />
    <title>首页</title>
    <style>
        .colLeft img{
    width:100%;
    height:width;
}
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <!--顶部-->
        <div class="top">
            <el-row>
                <el-col :span="5">
                    <div>
                        <img src="~/Content/imgs/logo.png" style="height: 37px; width: 135px;" />
                    </div>
                </el-col>
                <el-col :span="7">
                    <el-input placeholder="请输入内容" v-model="search">
                        <i slot="suffix" class="el-input__icon el-icon-search" style="cursor:pointer;" v-on:click="searchKey"></i>
                    </el-input>
                </el-col>
                <el-col :span="12">
                    <div class="top_item">
                        <a href="javascript:;">注册/登录<i class="el-icon-user"></i></a>
                        <a href="javascript:;">播放记录<i class="el-icon-time"></i></a>
                        <a href="/Car/BuyCar" target="_blank">
                            购物车 <el-badge :value="Carcount" class="item" type="primary">
                                <i class="el-icon-shopping-cart-1"></i>
                            </el-badge>
                        </a>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--导航-->
        <div class="navi">
            <a class="active" href="/Home/Index">首页</a>
            <a href="/Music/MusicType">分类</a>
            <a href="/Music/NewCd">新碟</a>
            <a href="/Music/Singer">歌手</a>
            <a href="/Music/MusicRank">排行榜</a>
            <a href="/Music/RecomMusic">推荐歌单</a>
        </div>
        <!--歌单推荐-->
        <div class="musicList">
            <div class="recomList">
                歌单推荐
            </div>
            <div class="forRecom">
                <div class="active">为你推荐</div>
                <div>国语</div>
                <div>欧美</div>
                <div>日韩</div>
                <div>DJ热歌</div>
            </div>
            <div class="noTableList">
                <el-carousel :interval="0">
                    <el-carousel-item class="carList">
                        <div class="carItem">
                            <div class="carImg image03">
                                <img src="~/Content/musicImg/1.jpg" />
                                <div class="ovrly"></div>
                                <div class="buttons">
                                    <i class="fa el-icon el-icon-video-play" onclick="javascript: location.href='/Music/PlayList?id=1'"></i>
                                </div>
                            </div>
                            <div class="carDesc">
                                天赐的声音 | 音色为王 举世无双
                            </div>
                            <div class="carDown">
                                订购量：22.4万
                            </div>
                        </div>
                        <div class="carItem">
                            <div class="carImg image03">
                                <img src="~/Content/musicImg/2.jpg" />
                                <div class="ovrly"></div>
                                <div class="buttons">
                                    <i class="fa el-icon el-icon-video-play"></i>
                                </div>
                            </div>
                            <div class="carDesc">
                                天赐的声音 | 音色为王 举世无双
                            </div>
                            <div class="carDown">
                                订购量：23.4万
                            </div>
                        </div>
                        <div class="carItem">
                            <div class="carImg image03">
                                <img src="~/Content/musicImg/3.jpg" />
                                <div class="ovrly"></div>
                                <div class="buttons">
                                    <i class="fa el-icon el-icon-video-play"></i>
                                </div>
                            </div>
                            <div class="carDesc">
                                天赐的声音 | 音色为王 举世无双
                            </div>
                            <div class="carDown">
                                订购量：23.4万
                            </div>
                        </div>
                        <div class="carItem">
                            <div class="carImg image03">
                                <img src="~/Content/musicImg/4.jpg" />
                                <div class="ovrly"></div>
                                <div class="buttons">
                                    <i class="fa el-icon el-icon-video-play"></i>
                                </div>
                            </div>
                            <div class="carDesc">
                                天赐的声音 | 音色为王 举世无双
                            </div>
                            <div class="carDown">
                                订购量：23.4万
                            </div>
                        </div>
                        <div class="carItem">
                            <div class="carImg image03">
                                <img src="~/Content/musicImg/5.jpg" />
                                <div class="ovrly"></div>
                                <div class="buttons">
                                    <i class="fa el-icon el-icon-video-play"></i>
                                </div>
                            </div>
                            <div class="carDesc">
                                天赐的声音 | 音色为王 举世无双
                            </div>
                            <div class="carDown">
                                订购量：23.4万
                            </div>
                        </div>
                    </el-carousel-item>
                    <el-carousel-item class="carList">
                        <div class="carItem">
                            <div class="carImg image03">
                                <img src="~/Content/musicImg/6.jpg" />
                                <div class="ovrly"></div>
                                <div class="buttons">
                                    <i class="fa el-icon el-icon-video-play"></i>
                                </div>
                            </div>
                            <div class="carDesc">
                                天赐的声音 | 音色为王 举世无双
                            </div>
                            <div class="carDown">
                                订购量：23.4万
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <!--排行榜-->
        <div class="Rank">
            <div class="RankTitle">
                <el-row>
                    <el-col :span="8">&nbsp;</el-col>
                    <el-col :span="8" style="text-align:center;font-size:34px;letter-spacing:6px; ">排行榜</el-col>
                    <el-col :span="8" style="position:relative;top:15px;left:20px;">更多></el- 0col>
                </el-row>
            </div>
            <div class="RankType">
                <div class="rankRow">
                    <div class="rankCol">
                        <div class="colLeft image04">
                            <img src="~/Content/musicImg/23.jpg" width="100%" height="100%" />
                            <div class="ovrly"></div>
                            <div class="buttons">
                                <i class="fa el-icon el-icon-video-play"></i>
                            </div>
                        </div>
                        <div class="colRight">
                            <div class="rightImg">
                                <div style="background-image:url('../Content/imgs/first.png')"></div>
                                <div style="background-image:url('../Content/imgs/two.png')"></div>
                                <div style="background-image:url('../Content/imgs/three.png')"></div>
                            </div>
                            <div class="rightDesc">
                                <div>
                                    世界这么大还是遇见你<br />
                                    <span style="font-size:12px;color:#afafaf;">程响</span>
                                </div>
                                <div>
                                    处处吻<br />
                                    <span style="font-size:12px;color:#afafaf;">杨千嬅</span>
                                </div>
                                <div>
                                    麻雀<br />
                                    <span style="font-size:12px;color:#afafaf;">李荣浩</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rankCol">
                        <div class="colLeft image04">
                            <img src="~/Content/musicImg/24.jpg" width="100%" height="100%" />
                            <div class="ovrly"></div>
                            <div class="buttons">
                                <i class="fa el-icon el-icon-video-play"></i>
                            </div>
                        </div>
                        <div class="colRight">
                            <div class="rightImg">
                                <div style="background-image:url('../Content/imgs/first.png')"></div>
                                <div style="background-image:url('../Content/imgs/two.png')"></div>
                                <div style="background-image:url('../Content/imgs/three.png')"></div>
                            </div>
                            <div class="rightDesc">
                                <div>
                                    世界这么大还是遇见你<br />
                                    <span style="font-size:12px;color:#afafaf;">程响</span>
                                </div>
                                <div>
                                    处处吻<br />
                                    <span style="font-size:12px;color:#afafaf;">杨千嬅</span>
                                </div>
                                <div>
                                    麻雀<br />
                                    <span style="font-size:12px;color:#afafaf;">李荣浩</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rankCol">
                        <div class="colLeft image04">
                            <img src="~/Content/musicImg/25.jpg" width="100%" height="100%" />
                            <div class="ovrly"></div>
                            <div class="buttons">
                                <i class="fa el-icon el-icon-video-play"></i>
                            </div>
                        </div>
                        <div class="colRight">
                            <div class="rightImg">
                                <div style="background-image:url('../Content/imgs/first.png')"></div>
                                <div style="background-image:url('../Content/imgs/two.png')"></div>
                                <div style="background-image:url('../Content/imgs/three.png')"></div>
                            </div>
                            <div class="rightDesc">
                                <div>
                                    世界这么大还是遇见你<br />
                                    <span style="font-size:12px;color:#afafaf;">程响</span>
                                </div>
                                <div>
                                    处处吻<br />
                                    <span style="font-size:12px;color:#afafaf;">杨千嬅</span>
                                </div>
                                <div>
                                    麻雀<br />
                                    <span style="font-size:12px;color:#afafaf;">李荣浩</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rankRow">
                    <div class="rankCol">
                        <div class="colLeft image04">
                            <img src="~/Content/musicImg/26.jpg" width="100%" height="100%" />
                            <div class="ovrly"></div>
                            <div class="buttons">
                                <i class="fa el-icon el-icon-video-play"></i>
                            </div>
                        </div>
                        <div class="colRight">
                            <div class="rightImg">
                                <div style="background-image:url('../Content/imgs/first.png')"></div>
                                <div style="background-image:url('../Content/imgs/two.png')"></div>
                                <div style="background-image:url('../Content/imgs/three.png')"></div>
                            </div>
                            <div class="rightDesc">
                                <div>
                                    世界这么大还是遇见你<br />
                                    <span style="font-size:12px;color:#afafaf;">程响</span>
                                </div>
                                <div>
                                    处处吻<br />
                                    <span style="font-size:12px;color:#afafaf;">杨千嬅</span>
                                </div>
                                <div>
                                    麻雀<br />
                                    <span style="font-size:12px;color:#afafaf;">李荣浩</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rankCol">
                        <div class="colLeft image04">
                            <img src="~/Content/musicImg/27.jpg" width="100%" height="100%" />
                            <div class="ovrly"></div>
                            <div class="buttons">
                                <i class="fa el-icon el-icon-video-play"></i>
                            </div>
                        </div>
                        <div class="colRight">
                            <div class="rightImg">
                                <div style="background-image:url('../Content/imgs/first.png')"></div>
                                <div style="background-image:url('../Content/imgs/two.png')"></div>
                                <div style="background-image:url('../Content/imgs/three.png')"></div>
                            </div>
                            <div class="rightDesc">
                                <div>
                                    世界这么大还是遇见你<br />
                                    <span style="font-size:12px;color:#afafaf;">程响</span>
                                </div>
                                <div>
                                    处处吻<br />
                                    <span style="font-size:12px;color:#afafaf;">杨千嬅</span>
                                </div>
                                <div>
                                    麻雀<br />
                                    <span style="font-size:12px;color:#afafaf;">李荣浩</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rankCol">
                        <div class="colLeft image04">
                            <img src="~/Content/musicImg/28.jpg" width="100%" height="100%" />
                            <div class="ovrly"></div>
                            <div class="buttons">
                                <i class="fa el-icon el-icon-video-play"></i>
                            </div>
                        </div>
                        <div class="colRight">
                            <div class="rightImg">
                                <div style="background-image:url('../Content/imgs/first.png')"></div>
                                <div style="background-image:url('../Content/imgs/two.png')"></div>
                                <div style="background-image:url('../Content/imgs/three.png')"></div>
                            </div>
                            <div class="rightDesc">
                                <div>
                                    世界这么大还是遇见你<br />
                                    <span style="font-size:12px;color:#afafaf;">程响</span>
                                </div>
                                <div>
                                    处处吻<br />
                                    <span style="font-size:12px;color:#afafaf;">杨千嬅</span>
                                </div>
                                <div>
                                    麻雀<br />
                                    <span style="font-size:12px;color:#afafaf;">李荣浩</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!--新碟推荐-->
        <div class="newCd">
            <div class="recomCd">
                新歌推荐
            </div>
            <div class="recomCdList">
                <div class="cdItem" style="background:url('../Content/imgs/cd1.jpg')">
                    <div class="cdQm">
                        曲目一
                    </div>
                    <div class="cdGd">
                        1.歌曲1 歌手1<br />
                        2.歌曲2 歌手2<br />
                        3.歌曲3 歌手3<br />
                        4.歌曲4 歌手4<br />
                        5.歌曲5 歌手5<br />
                        6.歌曲6 歌手6<br />
                        7.歌曲7 歌手7<br />
                        8.歌曲8 歌手8<br />
                        9.歌曲9 歌手9<br />
                        10.歌曲10 歌手10<br />
                        11.歌曲11 歌手11<br />
                        12.歌曲12 歌手12<br />
                        13.歌曲13 歌手13<br />
                        14.歌曲14 歌手14<br />
                        15.歌曲15 歌手15<br />
                    </div>
                    <div class="cdBtn">
                        <el-button type="normal" round>选购<i class="el-icon el-icon-right"></i></el-button>
                    </div>
                </div>
                <div class="cdItem" style="background:url('../Content/imgs/cd2.jpg')">
                    <div class="cdQm">
                        曲目二
                    </div>
                    <div class="cdGd">
                        1.歌曲1 歌手1<br />
                        2.歌曲2 歌手2<br />
                        3.歌曲3 歌手3<br />
                        4.歌曲4 歌手4<br />
                        5.歌曲5 歌手5<br />
                        6.歌曲6 歌手6<br />
                        7.歌曲7 歌手7<br />
                        8.歌曲8 歌手8<br />
                        9.歌曲9 歌手9<br />
                        10.歌曲10 歌手10<br />
                        11.歌曲11 歌手11<br />
                        12.歌曲12 歌手12<br />
                        13.歌曲13 歌手13<br />
                        14.歌曲14 歌手14<br />
                        15.歌曲15 歌手15<br />
                    </div>
                    <div class="cdBtn">
                        <el-button type="normal" round>选购<i class="el-icon el-icon-right"></i></el-button>
                    </div>
                </div>
                <div class="cdItem" style="background:url('../Content/imgs/cd3.jpg')">
                    <div class="cdQm">
                        曲目三
                    </div>
                    <div class="cdGd">
                        1.歌曲1 歌手1<br />
                        2.歌曲2 歌手2<br />
                        3.歌曲3 歌手3<br />
                        4.歌曲4 歌手4<br />
                        5.歌曲5 歌手5<br />
                        6.歌曲6 歌手6<br />
                        7.歌曲7 歌手7<br />
                        8.歌曲8 歌手8<br />
                        9.歌曲9 歌手9<br />
                        10.歌曲10 歌手10<br />
                        11.歌曲11 歌手11<br />
                        12.歌曲12 歌手12<br />
                        13.歌曲13 歌手13<br />
                        14.歌曲14 歌手14<br />
                        15.歌曲15 歌手15<br />
                    </div>
                    <div class="cdBtn">
                        <el-button type="normal" round>选购<i class="el-icon el-icon-right"></i></el-button>
                    </div>
                </div>
                <div class="cdItem" style="background:url('../Content/imgs/cd4.jpg')">
                    <div class="cdQm">
                        曲目四
                    </div>
                    <div class="cdGd">
                        1.歌曲1 歌手1<br />
                        2.歌曲2 歌手2<br />
                        3.歌曲3 歌手3<br />
                        4.歌曲4 歌手4<br />
                        5.歌曲5 歌手5<br />
                        6.歌曲6 歌手6<br />
                        7.歌曲7 歌手7<br />
                        8.歌曲8 歌手8<br />
                        9.歌曲9 歌手9<br />
                        10.歌曲10 歌手10<br />
                        11.歌曲11 歌手11<br />
                        12.歌曲12 歌手12<br />
                        13.歌曲13 歌手13<br />
                        14.歌曲14 歌手14<br />
                        15.歌曲15 歌手15<br />
                    </div>
                    <div class="cdBtn">
                        <el-button type="normal" round>选购<i class="el-icon el-icon-right"></i></el-button>
                    </div>
                </div>
                <div class="cdItem" style="background:url('../Content/imgs/cd5.jpg')">
                    <div class="cdQm">
                        曲目五
                    </div>
                    <div class="cdGd">
                        1.歌曲1 歌手1<br />
                        2.歌曲2 歌手2<br />
                        3.歌曲3 歌手3<br />
                        4.歌曲4 歌手4<br />
                        5.歌曲5 歌手5<br />
                        6.歌曲6 歌手6<br />
                        7.歌曲7 歌手7<br />
                        8.歌曲8 歌手8<br />
                        9.歌曲9 歌手9<br />
                        10.歌曲10 歌手10<br />
                        11.歌曲11 歌手11<br />
                        12.歌曲12 歌手12<br />
                        13.歌曲13 歌手13<br />
                        14.歌曲14 歌手14<br />
                        15.歌曲15 歌手15<br />
                    </div>
                    <div class="cdBtn">
                        <el-button type="normal" round>选购<i class="el-icon el-icon-right"></i></el-button>
                    </div>
                </div>
            </div>
        </div>
        <!--底部-->
        <footer class="el-footer-css">
            <div> <a hidefocus="true">关于我们</a>| <a hidefocus="true">监督举报</a> | <a hidefocus="true">广告服务</a> | <a hidefocus="true">投诉指引</a> | <a>隐私政策</a> | <a>儿童隐私政策</a> | <a hidefocus="true">用户服务协议</a>  |  <a hidefocus="true">招聘信息</a> | <a hidefocus="true">客服中心</a> | <a hidefocus="true">用户体验提升计划</a></div>
        </footer>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    search: '',
                    tableData: [
                         {
                              musciName: '火苗',
                              musicPeo: '苏晗',
                              musicTime: '00:11'
                         },
                         {
                              musciName: '美丽女人',
                              musicPeo: '程响',
                              musicTime: '03:55'
                         },
                         {
                              musciName: '很久以后',
                              musicPeo: 'G.E.M. 邓紫棋',
                              musicTime: '04:50'
                         },
                         {
                              musciName: '口是心非',
                              musicPeo: '杨小壮 / 鹏鹏',
                              musicTime: '03:23'
                         },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                              musicTime: '04:00'
                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06'
                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                              musicTime: '04:00'
                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06'
                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                              musicTime: '04:00'
                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06'
                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                              musicTime: '04:00'
                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06'
                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                              musicTime: '04:00'
                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06'
                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                              musicTime: '04:00'
                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06'
                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                              musicTime: '04:00'
                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06'
                         } 
                    ],
                    totalTime: 0,
                    Carcount: 0,
                    Buydisabled: true,
                }
            },
            methods: {
                searchKey() {
                    if (this.search == '' || this.search == null) {
                        this.$message.error('请输入所需要的内容');
                    } else {
                        location.href = '/Home/SearchMusic?keyWord=' + this.search
                    }
                }
            },
            mounted() {  
                var min = 0;
                var sec = 0;
                for (var i = 0; i < this.tableData.length; i++) {
                    min += parseInt(this.tableData[i].musicTime);   
                    sec += parseInt(this.tableData[i].musicTime.substring(3));
                }
                var oth = parseInt(sec / 60);
                var sec = sec % 60;
                min += oth;
                if (sec < 10) {
                    sec = "0" + sec;
                }
                this.totalTime = min + ':' + sec;
                this.Carcount = this.tableData.length;
            },
            watch: {
                totalTime: {
                    handler(newValue) {
                        var value = parseInt(newValue);
                        if (value > 0 && value< 70) {
                            this.Buydisabled = false;
                        } else {
                            this.Buydisabled = true;
                        }                      
                    } ,deep: true
                }
            }
        })  
    </script>
</body>
</html>
